<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <link rel="stylesheet" href="css/hero.css" />
  </head>

  <body>
    <a href="javascript:" id="create">创建英雄列表</a>
    <ul class="list"></ul>
    <!-- <script src="js/hero.js"></script> -->
    <script type="text/javascript">
      // 后的的数据
      // datas = [{},{},{}]
      let datas = [
        { name: '司马懿', imgSrc: './uploads/heros/01.jpg' },
        { name: '女娲', imgSrc: './uploads/heros/02.jpg' },
        { name: '百里守约', imgSrc: './uploads/heros/03.jpg' },
        { name: '亚瑟', imgSrc: './uploads/heros/04.jpg' },
        { name: '虞姬', imgSrc: './uploads/heros/05.jpg' },
        { name: '张良', imgSrc: './uploads/heros/06.jpg' },
        { name: '安其拉', imgSrc: './uploads/heros/07.jpg' },
        { name: '李白', imgSrc: './uploads/heros/08.jpg' },
        { name: '阿珂', imgSrc: './uploads/heros/09.jpg' },
        { name: '墨子', imgSrc: './uploads/heros/10.jpg' },
        { name: '鲁班', imgSrc: './uploads/heros/11.jpg' },
        { name: '嬴政', imgSrc: './uploads/heros/12.jpg' },
        { name: '孙膑', imgSrc: './uploads/heros/13.jpg' },
        { name: '周瑜', imgSrc: './uploads/heros/14.jpg' },
        { name: 'XXX', imgSrc: './uploads/heros/15.jpg' },
        { name: 'XXX', imgSrc: './uploads/heros/16.jpg' },
        { name: 'XXX', imgSrc: './uploads/heros/17.jpg' },
        { name: 'XXX', imgSrc: './uploads/heros/18.jpg' },
        { name: 'XXX', imgSrc: './uploads/heros/19.jpg' },
        { name: 'XXX', imgSrc: './uploads/heros/20.jpg' },
      ];
      const renderList = document.querySelector('#create');
      const list = document.querySelector('.list');
      let flag = true;
      const create = function (e) {
        e.preventDefault();
        flag &&
          datas.forEach(function (item) {
            const lis = document.createElement('li');
            lis.innerHTML = `<img src="${item.imgSrc}" title="${item.name}">`;
            list.appendChild(lis);
            flag = false;
          });
      };
      renderList.addEventListener('click', create);
    </script>
  </body>
</html>
